<template>
  <HeadContainer class="mine-legal-cp" :title="$t('title.uscStmt')" @back="back">
    <div :class="{ loading }">
      <div v-show="!loading" class="gap-col-8 cp-list">
        <div class="font-size-14 font-weight-500 line-height-135">{{ i18n.uscStmt?.info.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.uscStmt?.info.content1 }}</div>
        <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.uscStmt?.info.content2 }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.uscStmt?.info.follow }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">
          <ol class="pl-4 gap-col-4">
            <li>{{ i18n.uscStmt?.info.followList1 }}</li>
            <li>{{ i18n.uscStmt?.info.followList2 }}</li>
          </ol>
        </div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.uscStmt?.info.contact }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.uscStmt?.info.illegal }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.uscStmt?.info.report }}</div>
      </div>
    </div>
  </HeadContainer>
  <Jsonld :schema="schema"></Jsonld>
</template>

<script setup>
import { ref, shallowRef, watch } from 'vue'
import { useRouter } from 'vue-router'
import { $t } from '@/i18n'
import Jsonld from '@/components/common/Jsonld.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { useI18nPack } from '@/compositions/request/i18nPack'

const router = useRouter()
const i18n = useI18nPack('uscStmt')
const emits = defineEmits(['toPage'])
const prevPath = ref(window.history.state.back)

function back() {
  if (prevPath.value && !prevPath.value?.includes('mine')) {
    router.push({
      path: prevPath.value,
    })
  } else {
    emits('toPage', 2, 'legal')
    router.replace({ name: 'mine', params: { to: 'legal' } })
  }
}

const loading = ref(true)
watch(i18n, (newI18nValue) => {
  if (newI18nValue) {
    loading.value = false
  }
})

// Jsonld 佈置
const schema = shallowRef({
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Fantasi',
  url: 'https://www.fantasi.one/mine/legal/cookie-policy',
})
</script>
